import React, { useState, useEffect } from "react";
import { BorderBox13 } from "@jiaminghi/data-view-react";
import BrowseCategories from "./charts/BrowseCategories";
import UserIdentityCategory from "./charts/UserIdentityCategory";
import OfflinePortal from "./charts/OfflinePortal";
import Feedback from "./charts/Feedback";
import { ModuleTitle } from "../../style/globalStyledSet";
import { RightPage, RightTopBox, RightCenterBox, RightBottomBox } from "./style";
import { getRightPageData } from "../../services/index";
import earthGif from '../../assets/images/earth-rotate.gif';
export default function index() {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        getRightPageData()
            .then((response) => {
                console.log("数据请求成功", response);
                setData(response);
                setLoading(false);
            })
            .catch((err) => {
                console.error("数据请求失败", err);
                setError(err.message);
                setLoading(false);
            });
    }, []); // 空数组作为第二个参数，意味着这个 effect 只在组件挂载时运行一次

    if (loading) {
        return <div>Loading...</div>; // 在数据加载时显示加载指示器
    }

    if (error) {
        return <div>Error: {error}</div>; // 在发生错误时显示错误消息
    }
    const { offline, browseCategories, userIdentityCategory } = data;
    return (
        <RightPage>
            <RightTopBox>
                <div className="right-top">
                    <ModuleTitle>
                        <i className="iconfont">&#xe7f7;</i>
                        <span>关联数据类别分布</span>
                    </ModuleTitle>
                    <div className="right-top-content">
                        <BrowseCategories browseCategories={browseCategories}></BrowseCategories>
                        <img alt="地球" className="earth-gif" src={earthGif.src} />
                    </div>
                </div>
            </RightTopBox>

            <RightCenterBox>
                <ModuleTitle>
                    <i className="iconfont">&#xe7fd;</i>
                    <span>平均用户类别排布</span>
                </ModuleTitle>
                <UserIdentityCategory userIdentityCategory={userIdentityCategory}></UserIdentityCategory>
            </RightCenterBox>

            <RightBottomBox>
                <BorderBox13 className="right-bottom-borderBox13">
                    <div className="right-bottom">
                        <ModuleTitle>
                            <i className="iconfont">&#xe790;</i>
                            <span>今日线下门户流量</span>
                        </ModuleTitle>
                        {/* 反馈 */}
                        <div className="feedback-box">
                            {offline
                                ? offline.feedback.map((item, index) => {
                                      return (
                                          <div className="feedback-box-item" key={index}>
                                              <Feedback FeedbackData={item}></Feedback>
                                              <span className="dis-text">{item.title}</span>
                                          </div>
                                      );
                                  })
                                : ""}
                        </div>
                        {/* 门店 */}
                        <div className="offline-portal-box">
                            {offline ? <OfflinePortal offlinePortalData={offline.offlinePortalData} /> : ""}
                        </div>
                    </div>
                </BorderBox13>
            </RightBottomBox>
        </RightPage>
    );
}
